<template>
  <div class="chapter-edit-container">
    <el-steps :active="active" finish-status="success">
      <el-step title="教案上传" icon="el-icon-upload"></el-step>
      <el-step title="习题编辑" icon="el-icon-edit"> </el-step>
      <!-- <el-step title="预览及发布"></el-step> -->
    </el-steps>
    <div class="content-container">
      <!-- step=0 上传栏 -->
      <el-upload
        class="upload-demo"
        drag
        multiple
        action="#"
        ref="upload"
        :auto-upload="false"
        :file-list="fileList"
        :on-change="handleChange"
        :on-remove="onRemove"
        v-if="active == 0"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          在此处上传视频及其他教学资料
        </div>
      </el-upload>

      <!-- step=1，即编辑习题 -->
      <!-- 需求当我点击下一步，就把习题按照情况进行上传  -->
      <div v-else-if="active == 1" style="margin-top: 20px">
        <topic-edit
          :topicIds="topicIds"
          :operTopicIds="operTopicIds"
          :setCriterion="setCriterion"
        >
          <el-date-picker
            v-model="deadline"
            value-format="yyyy-MM-dd hh:mm:ss"
            type="datetime"
            placeholder="选择截止日期时间"
          >
          </el-date-picker>
        </topic-edit>
      </div>
    </div>
    <!-- 控制下一项的按钮 -->
    <el-button style="margin-top: 15px; margin-left: 480px" @click="next">{{
      active == 2 ? "完成" : "下一步"
    }}</el-button>
  </div>
</template>

<script>
import TopicEdit from "@/components/TopicEdit.vue";
import { mapMutations } from "vuex";
import { Message } from "element-ui";
export default {
  name: "ChapterEdit",
  components: { TopicEdit },
  data() {
    return {
      uploads: {},
      active: 0,
      postAddr: "", //资源上传的接口
      fileList: [],
      course_id: "",
      section_id: "",
      topicIds: {
        singleChoice: [],
        multipleChoice: [],
        trueOrFalse: [],
        blankQuestion: [],
        essayQuestion: [],
      },
      criterion: {},
      deadline: "",
    };
  },
  methods: {
    // 文件列表被移除的钩子
    onRemove(file, fileList) {
      this.fileList = fileList;
    },
    ...mapMutations("windowAbout", ["CLOSE"]),
    handleChange(file, fileList) {
      console.log("change");
      this.fileList = fileList;
    },
    submitUpload() {
      const files = new FormData();
      this.fileList.map((v) => {
        files.append("file", v.raw);
      });
      this.axios.post(`${this.$reqPrefix}/upload`, files).then((res) => {
        // console.log(res);
        const uploads = res.data.data;
        this.uploads.video = uploads.filter(
          (v) => v.fileType == "video"
        )[0].url;
        this.uploads.materials = uploads.filter((v) => v.fileType == "other");
      });
    },
    isTopicIdsEmpty() {
      let flag = true;
      for (const key in this.topicIds) {
        // console.log(key);
        if (this.topicIds[key].length > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    },
    next() {
      // 如果active=0
      if (this.active == 0) {
        if (this.fileList.length !== 0) {
          this.submitUpload();
        }
      } else if (this.active == 1) {
        // TODO:要设置了对应的评分标准才能下一步
        if (
          Object.keys(this.criterion).length === 0 &&
          !this.isTopicIdsEmpty()
        ) {
          alert("需要设置评分标准");
          return;
        }
        this.CLOSE();
        // 上传习题
        // 使用状态上升
        const { section_id, criterion, course_id, deadline } = this;
        const { teacher_id } = JSON.parse(localStorage.getItem("userInfo"));

        this.$http
          .post(`${this.$reqPrefix}/createSectionTest`, {
            section_id,
            topics: this.topicIds,
            criterion,
            course_id,
            teacher_id,
            deadline,
          })
          .then((res) => {
            if (res.data.code == 200) {
              Message.success("创建章节测试成功");
            }
          });
      }
      if (this.active == 2) {
        this.$http
          .post(
            `${this.$reqPrefix}/uploadStudentMaterial`,
            {
              course_id: this.course_id,
              section_id: this.section_id,
              ...this.uploads,
            },
            {
              headers: {
                "Content-Type": "application/json;charset=UTF-8",
              },
            }
          )
          .then((res) => {
            if (res.data.code == 200) {
              alert("上传成功，确定后返回章节编辑界面...");
              this.$router.replace("/detail/teacher-chapter");
            }
          });
      }
      this.active++;
    },
    // 操作习题卷的回调，目前只考虑往某个题型后面加一道题
    operTopicIds(topicType, topicID) {
      console.log(topicType, topicID);
      if (!this.topicIds[topicType]) {
        console.log("未有这种题型");
        return;
      }
      this.topicIds[topicType].push(topicID);
    },
    setCriterion(criterion) {
      this.criterion = criterion;
    },
  },
  mounted() {
    this.course_id = this.$store.state.studyAbout.course.course_id;
    this.section_id = this.$route.query.section_id;
  },
};
</script>

<style lang='less' scoped>
.chapter-edit-container {
  width: 100%;
  height: 100%;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  .el-upload {
    /**-moz-animatio
    
    */
  }
  .el-steps {
    width: 95%;
    margin: 20px auto;
  }
  .content-container {
    width: 95%;
    // height: calc(100% - 40px);
    height: fit-content;
    // background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .uploader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>